<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滨海基金 -员工的客户列表</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="./css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

<link href="css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="./js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="./js/img_upload.js"></script>
<script type="text/javascript" src="./js/fileUploadUtil.js"></script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="./js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script src="js/common.js"></script>
<style type="text/css">
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}
/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}
</style>
</head>
<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>
						客户 <small>列表,信息</small>
					</h5>
					<div class="ibox-tools">
						<a class="btn  btn-sm btn-bitbucket"
							href="toHighSeasPoolAllList.do"> <i class="fa fa-reply"></i>
							返回
						</a> 
					</div>
					<div class="ibox-content">
						<div class="input-group" style="margin-bottom: 5px;" >
						<input id="startDate" type="text" class="form-control"
								placeholder="开始时间" style="width: 170px;" onClick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd ',readOnly:true})" ><span style="line-height: 34px;float: left;">&nbsp;-&nbsp;</span>
						<input id="endDate" type="text" class="form-control"
								placeholder="结束时间" style="width: 170px;" onClick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd ',readOnly:true})" > 
						</div>
						<div class="input-group col-md-3"
							style="margin-top: 0px; positon: relative; float: left; bottom: -5px;">
							<input id="customerName" type="text" class="form-control "
								placeholder="请输入关键字（名称）"/ > <span
								class="input-group-btn"> <input type="hidden"
								id="employeeId" value="${employeeId }" />
								<button onclick="Search()" class="btn btn-info btn-search">查询</button>
							</span>
						</div>
						<table
							class="table table-striped table-bordered table-hover dataTables-example"
							id="dataTables-example">
							<thead>
								<tr style="height: 30px;">
									<th style="width: 50px" align="center">序号</th>
									<th style="width: 140px" align="center">名称</th>
									<th style="width: 100px" align="center">性别</th>
									<th style="width: 120px" align="center">客户类型</th>
									<th style="width: 150px" align="center">职业</th>
									<th style="width: 180px" align="center">电话</th>
									<th style="width: 180px" align="center">录入时间</th>
									<th style="width: 100px" align="center">被拜访量(次)</th>
									<th style="width: 100px" align="center">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- 详情模态框 -->
		<div class="modal fade  " id='detailModal'>
			<div class="modal-dialog" style="width: 1000px; height: 600px;">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss='modal'
							onclick="activityChange(2, 'detailActivityDiv', 'activityId')">×</button>

						<h2 class="modal-title" align="center">信息详情</h2>
					</div>

					<div class="modal-body" align="center">
						<form class="form-horizontal m-t" id="editForm"
							enctype="multipart/form-data">
							<div class="row form-body form-horizontal m-t">
								<div class="col-md-6 droppable sortable">
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">客户姓名<span
											style="color: red;">*</span>：
										</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="customerName"
												id="dcustomerName" class="form-control"> <input
												type="hidden" name="customerId" id="dcustomerId">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">性别： </label>
										<div class="col-sm-8 i-checks" style="text-align: left;">
											<label class="radio-inline"> <input type="radio"
												disabled="disabled" value="男" id="eoptionsRadios1"
												name="sex">&nbsp;男
											</label> <label class="radio-inline"> <input type="radio"
												disabled="disabled" value="女" id="eoptionsRadios2"
												name="sex">&nbsp;女
											</label>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">出生日期：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="date"
												id="dbirthday" class="form-control"
												onClick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd '})">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">籍贯：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="birthPlace"
												id="dbirthPlace" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">手机号码<span
											style="color: red;">*</span>：
										</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="mobileNumber"
												id="dmobileNumber" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">联系方式： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="otherLinks"
												id="dotherLinks" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">证件类型：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="idType" id="didType">
												<option value=""></option>
												<option value="0">身份证</option>
												<option value="1">军警证</option>
												<option value="2">护照</option>
												<option value="3">港澳通行证</option>
												<option value="4">其他</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">证件号码：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="idNumber"
												id="didNumber" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">职业： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="profession"
												id="dprofession" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">风险评级： </label>
										<div class="col-sm-8">
											<select class="form-control " disabled="disabled"
												name="riskRating" id="driskRating">
												<option value="0" selected="selected">-无-</option>
												<option value="1">保守型</option>
												<option value="2">稳健型</option>
												<option value="3">平衡型</option>
												<option value="4">成长型</option>
												<option value="5">进取型</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">风险问卷：</label>
										<div class="col-sm-8">
											<a href="#" class="form-control" id="driskRatingDown"
												target="_blank">点击查看</a>
										</div>
									</div>
								</div>
								<div class="col-md-6 droppable sortable">
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">客户类型： </label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control "
												name="customerType" id="dcustomerType">
												<option value=""></option>
												<option value="0">自然人</option>
												<option value="1">老总</option>
												<option value="2">部门经理</option>
												<option value="3">部门主管</option>
												<option value="4">普通员工</option>
												<option value="5">法人</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">婚姻状况：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="maritalStatus" id="dmaritalStatus">
												<option value=""></option>
												<option value="0">未婚</option>
												<option value="1">已婚</option>
												<option value="2">离异</option>
												<option value="3">丧偶</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">公司名称：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="company"
												id="dcompany" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">公司地址：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="companySite"
												id="dcompanySite" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">网址：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="url" id="durl"
												class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">学历：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="educationBackground" id="deducationBackground">
												<option value=""></option>
												<option value="0">大专</option>
												<option value="1">本科</option>
												<option value="2">硕士</option>
												<option value="3">博士</option>
												<option value="4">其他</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">家庭住址： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="address"
												id="daddress" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">客户来源：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="customerSource" id="dcustomerSource">
												<option value=""></option>
												<option value="1">市场活动</option>
												<option value="2">录入客户</option>
												<option value="0">其他来源</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable" id="detailActivityDiv"
										style="display: none;">
										<label class="col-sm-3 control-label">来源活动：</label>
										<div class="col-sm-8">
											<select disabled="disabled" name="activityId"
												id="detailActivityId" class="form-control">
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">座机号码：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="phone"
												id="dphone" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">传真号码：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="facsimile"
												id="efacsimile" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">相关附件：</label>
										<div class="col-sm-8" id="denclosure" >
											
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer" align="center">
						<div align="center">
							<button class="btn btn-default" onclick="closeModal(detailModal)">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function FormatDate(date) {
				return date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
						+ date.getDate();
			}
			var table;
			$(function() {

				//提示信息
				var lang = {
					"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
					"sLengthMenu" : "每页 _MENU_ 项",
					"sZeroRecords" : "没有匹配结果",
					"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
					"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
					"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
					"sInfoPostFix" : "",
					"sSearch" : "搜索:",
					"sUrl" : "",
					"sEmptyTable" : "表中数据为空",
					"sLoadingRecords" : "载入中...",
					"sInfoThousands" : ",",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "上页",
						"sNext" : "下页",
						"sLast" : "末页",
						"sJump" : "跳转"
					},
					"oAria" : {
						"sSortAscending" : ": 以升序排列此列",
						"sSortDescending" : ": 以降序排列此列"
					}
				};

				//初始化表格
				table = $("#dataTables-example")
						.dataTable(
								{

									"fnDrawCallback" : function() {
										var api = this.api();
										var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
										api.column(0).nodes().each(
												function(cell, i) {
													cell.innerHTML = startIndex
															+ i + 1;
												});
									},
									language : lang, //提示信息
									autoWidth : false, //禁用自动调整列宽
									stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
									processing : true, //隐藏加载提示,自行处理
									serverSide : true, //启用服务器端分页
									searching : false, //禁用原生搜索
									orderMulti : false, //启用多列排序
									order : [], //取消默认排序查询,否则复选框一列会出现小箭头
									renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
									pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
									"aLengthMenu" : [ 10 ],
									"bLengthChange" : false,//屏蔽tables的一页展示多少条记录的下拉列表
									ordering : false, //关闭排序图标
									ajax : function(data, callback, settings) {
										//封装请求参数
										var param = {};
										param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
										param.start = data.start;//开始的记录序号
										param.page = (data.start / data.length) + 1;//当前页码
										//param.darw=darw;  //计数器
										var customerName = $("#customerName")
												.val().trim();
										if (customerName != null
												&& customerName != "") {
											param.customerName = customerName
										}
										param.personLiable = $("#employeeId")
												.val();
										param.startDate=$("#startDate").val();
										param.endDate=$("#endDate").val();
										//console.log(param);
										//ajax请求数据
										$
												.ajax({
													type : "POST",
													url : "employeeCustomerList.do",
													cache : false, //禁用缓存
													data : param, //传入组装的参数
													dataType : "json",
													success : function(result) {

														//console.log(result);
														//setTimeout仅为测试延迟效果
														setTimeout(
																function() {
																	//封装返回数据
																	var returnData = {};
																	draw = result.draw;//后台返回的计数器
																	returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
																	returnData.recordsTotal = result.total;//返回数据全部记录
																	returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
																	returnData.data = result.data;//返回的数据列表

																	//console.log(returnData);
																	//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
																	//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
																	callback(returnData);
																}, 200);
													}
												});
									},
									//列表表头字段
									columns : [ {
										"data" : null
									}, {
										"data" : "customerName"
									}, {
										"data" : "sex"
									}, {
										"data" : function(data) {
											if (data.customerType == 0) {
												return "自然人";
											} else if (data.customerType == 1) {
												return "老总";
											} else if (data.customerType == 2) {
												return "部门经理";
											} else if (data.customerType == 3) {
												return "部门主管";
											} else if (data.customerType == 4) {
												return "普通员工";
											} else if (data.customerType == 5) {
												return "法人";
											}
										}
									}, {
										"data" : "profession"
									}, {
										"data" : "mobileNumber"
									}, {
										"data" : function(data){
											return toDateTime(data.createDate);
										}
									}, {
										"data" : "visitCount"
									}
									],
									columnDefs : [ {
										"targets" : [ 8 ], //第七列加一条 自定义列
										"data" : "customerId", //数据列名
										"render" : function(data, type, full) { //返回自定义的内容editCustomer

											return "<a class=\"btn btn-info btn-xs\"onclick=\"detailCustomer('"
													+ data
													+ "')\">详细</a> "
													+ "<a class=\"btn btn-info btn-xs\" href=\"toEmpContract.do?id="
													+ data + "&employeeId="+$("#employeeId").val()+"\">合同</a> "; 
										}
									} ]
								})//.api();													
			})

			//详细查询数据事件
			function detailCustomer(id) {
				$
						.ajax({
							url : "editEmployeeCustomer.do",
							data : {
								"id" : id
							},
							dataType : "json",
							type : "post",
							success : function(result) {
								if (result.flag == 1) {
									$("#dcustomerType").val(
											result.chance.customerType);
									$("#dcustomerName").val(
											result.chance.customerName);
									$("#dmobileNumber").val(
											result.chance.mobileNumber);
									$("#dcustomerId").val(
											result.chance.customerId);
									$("#dbirthPlace").val(
											result.chance.birthPlace);
									$("#dotherLinks").val(
											result.chance.otherLinks);
									$("#daddress").val(result.chance.address);
									$("#dprofession").val(
											result.chance.profession);
									$("#driskRating").val(
											result.chance.riskRating);
									if (result.chance.picture != null
											&& result.chance.picture != "") {
										$("#driskRatingDown").attr("href",
												result.chance.picture);
										$("#driskRatingDown").text("点击查看");
									} else {
										$("#driskRatingDown").text("无");
										$("#driskRatingDown").attr("href",
												"javascript:void(0);");
									}
									$("#denclosure").text("");
									if (result.chance.list != null
											&& result.chance.list.length > 0) {
										var html = "";
										for (var i = 0; i < result.chance.list.length; i++) {
											html += '<a href="'+result.chance.list[i].url+'" target="_blank" download>'
													+ result.chance.list[i].name
													+ '</a><br/>'
										}
										$("#denclosure").append(html);
									} else {
										$("#denclosure").text("无");
									}
									$("#dcompany").val(result.chance.company);
									$("#dcompanySite").val(
											result.chance.companySite);
									$("#durl").val(result.chance.url);
									$("#didNumber").val(result.chance.idNumber);
									$("#dphone").val(result.chance.phone);
									$("#dfacsimile").val(
											result.chance.facsimile);
									$("#didType").val(result.chance.idType);
									$("#dmaritalStatus").val(
											result.chance.maritalStatus);
									$("#deducationBackground").val(
											result.chance.educationBackground);
									$("#dcustomerSource").val(
											result.chance.customerSource);
									if (result.chance.activityId != null) {
										activityChange(1, "detailActivityDiv",
												"detailActivityId");
										$("#detailActivityId").val(
												result.chance.activityId);
									}
									if (result.chance.sex != null
											&& result.chance.sex != "") {
										$(
												":radio[name='sex'][value='"
														+ result.chance.sex
														+ "']").iCheck('check');
									}

									var birthday = new Date(
											result.chance.birthday);//时间戳转换为java.util.date
									birthday = FormatDate(birthday);//抽取出来年月日
									$("#dbirthday").val(birthday);

									$("#detailModal").modal("show");
								} else if (result.flag == 0) {
									swal("异常", "暂无数据,请稍后再试!", "warning")
								}
							},
							error : function() {
								swal("错误", "系统异常,请稍后再试!", "error")
							}
						});
			}
			//显示modal
			function showModal(modal) {
				$(modal).modal("show");
				//关闭隐藏域	
			}
			//隐藏modal
			function closeModal(modal) {
				$(modal).modal("hide");
			}
			function Search() {
				/* var oSettings = table.fnSettings();  
				oSettings._iDisplayStart = 0;  
				table.fnDraw(oSettings);   */
				table.fnDraw();
			}
			//单选框样式
			$(document).ready(function() {
				$(".i-checks").iCheck({
					checkboxClass : "icheckbox_square-green",
					radioClass : "iradio_square-green",
				})
			});
			function activityChange(value, activityDiv, activityId) {
				if (value == 1) {
					$("#" + activityDiv).show();
					$
							.ajax({
								url : "getActivityListInfo.do",
								dataType : "json",
								type : "post",
								success : function(result) {
									if (result.code == 0) {
										var da = result.data;
										var htmlText = "";
										for (var i = 0; i<da.length; i++) {
											htmlText += "<option  value='" + da[i].activityId + "'>"+ da[i].activityName+ "</option>";									
										}
										$("#" + activityId).append(htmlText);
									} else {
										swal("服务器异常", "无法获取到活动信息,请稍后再试!", "warning")
									}
								},
								error : function() {
									swal("服务器异常", "无法获取到活动信息,请稍后再试!", "error")
								}
							});
				} else {
					$("#" + activityDiv).hide();
				}
			}
		</script>
</body>

</html>